<template>
    <div>
        <div class="header">
            <router-link to="/my" class="header-btnLeft"  ><img src="../assets/back-btn.png"></router-link>
            <h1 class="header-title">积分</h1>
            <div class="header-btnRight"></div>
        </div>

        <div class="head">
            <div class="head-title">当前可用积分></div>
            <div class="head-body">
                <div class="head-body-num">{{userInfo.member_integral}}</div>
                <div class="head-body-help" @click="helpDiv"  @touchmove.prevent>如何获取积分？</div>
            </div>
        </div>

        <div class="help" v-if="helpDivVal">
            <div class="help-panel">
                <div>
                    <div class="help-panel-title">如何获取积分</div>
                    <div class="help-panel-body">
                        <div  class="help-panel-body-desc">1、成功下单并完成服务后可获取积分。</div>
                        <div  class="help-panel-body-desc">2、参与评价可获取积分。</div>
                    </div>
                    <div class="help-panel-close" @click="helpDiv">知道了</div>
                </div>
            </div>

        </div>

        <div class="list">
            <div class="list-title">积分记录</div>
            <div class="list-item"  v-for="item in integral">
                <div class="list-item-title">{{item.describe}}</div>
                <div class="list-item-info">
                    <div  class="list-item-info-num">{{item.integral}}积分</div>
                    <div  class="list-item-info-date">{{item.create_time}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    export default {
        name: "My-integral",
        data(){
            return{
                helpDivVal:false,
                integral:[],
                userInfo:[]
            }
        },
        methods:{
            //打开关闭帮助div
            helpDiv() {
                this.helpDivVal=!this.helpDivVal

            },
            getData(){
                let _that = this;
                _that.axios.post('wap/member/integralLog', {})
                    .then(res => {
                        _that.integral=res.data;
                    })
                    .catch(err => console.log(err));
            },
            share() {
                wxShare({title: '我的积分', debug: false}, function () {
                    console.log('分享成功')
                });
            }
        },
        mounted(){
            this.userInfo=storage.get('userinfo')
            console.log(this.userInfo)
            this.getData();
            this.share();
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .head{
        background: #f5e7c9;
        height: rpx(240);
        padding: rpx(30);
        &-title{
            padding:rpx(30) 0;
            font-size: rpx(26);
            color: #d8a02a;
        }
        &-body{
            display: flex;
            align-items: center;
            &-num{
                flex: 1;
                font-size: rpx(48);
                font-weight: bold;
                color: #d8a02a;
            }
            &-help{
                line-height: rpx(32);
                border: solid 1px #d8a02a;
                padding: rpx(2) rpx(10);
                font-size: rpx(24);
                color: #d8a02a;
                border-radius: $radius6;
            }
        }
    }

    //获取积分弹窗
    .help{
        position: absolute;
        top:0;
        right:0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,.5);
        &-panel{
            position: absolute;
            top:rpx(300);
            right:rpx(60);
            left:rpx(60);
            background: $color0;
            border-radius: $radius6;

            &-title{
                padding: rpx(60) 0 rpx(40);
                font-size: rpx(48);
                text-align: center;
            }
            &-body{
                padding: 0  rpx(40) rpx(40);
                &-desc{
                    padding-bottom: rpx(20);
                }
            }
            &-close{
                border-top: solid 1px $color2;
                height:  rpx(100);
                line-height: rpx(100);
                font-size: rpx(36);
                text-align: center;
            }
        }
    }

    .list{
        &-title{
            padding: rpx(60) rpx(30) rpx(30);
            font-size: rpx(40);
            border-bottom: solid  1px $color2;
        }
        &-item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: rpx(30);
            border-bottom: solid  1px $color2;
            &-title{
                font-size: rpx(34);
            }
            &-info{
                &-num{
                    font-size: rpx(34);
                }
                &-date{
                    padding-top: rpx(10);
                    font-size: rpx(24);
                    color: $color5;
                }
            }

        }

    }


</style>